<template>
	<view class="content">
		<!-- F1: 轮播图 -->
		<swiper class="swiper" autoplay circular :interval="5000" :duration="250" indicator-dots indicator-color="#000000"
			indicator-active-color="#00ff00">
			<swiper-item v-for="item in carousels" :key="item.cid">
				<image mode="widthFix" class="img" :src="base+item.pic">
				</image>
			</swiper-item>
		</swiper>

		<!-- F2: 八宫格-功能菜单 -->
		<!-- isFull：是否为通栏卡片（左右撑满父元素） -->
		<!-- <uni-card is-full class="card"> -->
		<!-- uni-grid：宫格组件 -->
		<!-- show-border：是否显示宫格项的边框 -->
		<!-- square：共各项是否显示为方形 -->
		<uni-grid :column="4" class="grid" :show-border="false" :square="false">
			<uni-grid-item v-for="(m,i) in menuItems" :key="i">
				<view class="grid-item" @click="jump(m.href)">
					<image :src="base + m.pic" mode="widthFix" />
					<text>{{m.title}}</text>
				</view>
			</uni-grid-item>
		</uni-grid>
		
		<view class="grid">
			<view class="grid-item" v-for="(m,i) in menuItems" :key="i" @click="jump(m.href)">
				<image :src="base + m.pic" mode="widthFix" />
				<text>{{m.title}}</text>
			</view>
		</view>
		<!-- </uni-card> -->

		<!-- F3：商业服务 -->
		<view class="f3">
			<!-- 上方：标题部分 -->
			<text class="f3-title">| 商业服务 - {{height}}</text>
			<!-- 下方：主体内容 -->
			<view class="f3-content">
				<view class="left">
					<!-- 文字部分 -->
					<view class="txt">
						<text>房屋租售</text>
						<view class="bottom">
							<text>租房</text>
							<text>短租</text>
						</view>
					</view>
					<!-- 图片部分 -->
					<image class="img" src="../../static/img/chuzu.png" mode="widthFix" />
				</view>
				<view class="right">
					<!-- 文字部分 -->
					<view class="txt">
						<text>便民服务</text>
						<view class="bottom">
							<navigator>便利店</navigator>
							<navigator>超市</navigator>
						</view>
					</view>
					<!-- 图片部分 -->
					<!-- mode: widthFix - 宽度固定，高度等比例缩放 -->
					<!-- mode: scaleToFill - 不保持宽高比，缩放图片以填充指定的宽高区域 -->
					<image class="img" src="../../static/img/bianmin.png" mode="widthFix" />
				</view>
			</view>
		</view>

		<!-- F4：社区活动 	-->
		<view class="f4">
			<!-- 上方：标题 -->
			<text class="f4-title">| 社区活动</text>
			<!-- 下方：主体部分-活动列表 	-->
			<uni-list>
				<!-- clickable：是否列表项能够点击 -->
				<!-- link：是否给列表项添加“链接”效果 = clickable + 右向箭头 -->
				<!-- to：指定列表项点击后的跳转地址 -->
				<uni-list-item v-for="(a,i) in activities" :key="i" clickable>
					<!-- 列表项主体插槽 -->
					<template v-slot:body>
						<view class="activity-body">
							<!-- 文字1：主题 -->
							<text class="heading">{{a.title}}</text>
							<!-- 文字2：内容 -->
							<text class="details">{{a.content}}</text>
							<!-- 文字3：时间 -->
							<text class="time">{{formatDate(a.startTime)}}</text>
						</view>
					</template>
					<!-- 列表项尾部插槽 -->
					<template v-slot:footer>
						<image class="activity-img" :src="base+a.pic" mode="widthFix"/>
					</template>
				</uni-list-item>
			</uni-list>
		</view>
	</view>
</template>

<script>
	import {indexData, base} from '@/service'
	import {formatDate} from '@/util'
	export default {
		data() {
			return {
				base,		//把脚本中的局部变量上升为“数据变量”，这样就可以在模板中使用
				formatDate, //把导入的函数上升为“数据变量”
				activities: [], // 最新的社区活动列表
				carousels: [], // 轮播图广告列表
				menuItems: [] ,// 功能菜单列表
				height:0,
			}
		},
		onLoad() {
			let info = uni.getSystemInfoSync()		
			console.log(info);
			this.height = info.statusBarHeight
			// 弹出欢迎提示框
			uni.showToast({
				title: "欢迎回来",
				icon: 'none',
				duration: 2500
			})
			// 发送请求，加载首页数据
			this.initData()
			console.log('index onLoad...')
		},
		onShow() {
			console.log('index onShow...')
		},
		onReady() {
			console.log('index onReady...')
		},
		onHide() {
			console.log('index onHide...')
		},
		onUnload() {
			console.log('index onUnload...')
		},

		methods: {
			/* 发请求，加载首页信息 */
			async initData() {
				let data = await indexData()
				console.log(data)
				this.activities = data.activities
				this.carousels = data.carousels
				this.menuItems = data.menuItems
			},
			//跳转到指定页面
			jump(url){
				uni.navigateTo({
					url
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.swiper {
		width: 750rpx;
		height: 300rpx;
	}

	.swiper .img {
		width: 750rpx;
	}

	// .card {
	// 	//uni-ui组件库中的组件大多有默认样式，自定义样式优先级不足的话，可加!important
	// 	margin-top: $uni-spacing-col-base !important;
	// 	width: 100%;
	// }
	.grid {
		width:100%;
		margin-top: $uni-spacing-col-base;
		background-color: $uni-bg-color;
		flex-wrap: wrap;
		.grid-item {
			width: 25%;
			flex-direction: column; //主轴方向：纵向
			justify-content: center; //子元素在主轴方向：居中
			align-items: center; //子元素在交叉轴方向：居中
			padding: $uni-spacing-col-lg 0;

			image {
				width: 36%;
			}

			text {
				font-size: $uni-font-size-sm;
			}
		}
	}

	.f3 {
		margin-top: $uni-spacing-col-base; //上方的外间距
		background-color: $uni-bg-color; //背景颜色
		width: 100%;
		flex-direction: column; //弹性容器的主轴方向：纵向

		.f3-title {
			padding: $uni-spacing-col-base $uni-spacing-row-base;
			border-bottom: $uni-border;
			font-size: $uni-font-size-sm;
		}

		.f3-content {
			>view {
				flex: 1; //尺寸增长权重：1
				border: $uni-border; //边框
				padding: $uni-spacing-col-base $uni-spacing-row-sm; //内边距
				align-items: center; //子元素（即文字和图片）在交叉轴上：居中对齐

				.txt {
					flex: 1; //尺寸增长权重：1
					flex-direction: column; //主轴方向：纵向
					padding-right: $uni-spacing-row-base; //右侧的内边距

					>text {
						font-size: $uni-font-size-base;
						font-weight: bold;
					}

					>.bottom {
						font-size: $uni-font-size-sm;
						color: $uni-color-subtitle; //#555555
						justify-content: space-between; //子元素在主轴方向上：两端调整对齐
					}
				}

				.img {
					flex: 1; //尺寸增长权重：1
					width: 100%;
				}
			}
		}
	}

	.f4 {
		flex-direction: column;//弹性容器的主轴方向：纵向
		margin-top: $uni-spacing-col-base;//上外间距
		background-color: $uni-bg-color;//背景色
		width: 100%;
		.f4-title {
			font-size: $uni-font-size-sm;//字体大小
			padding: $uni-spacing-col-base $uni-spacing-row-base;//内边距
		}
		.activity-body {
			flex-direction: column; //弹性容器主轴方向：纵向
			flex: 1; //尺寸增长权重：1
			width: 440rpx;  //子元素可能会产生文本溢出，必须限制住
			.heading {
				font-size: $uni-font-size-base; //文本大小
				font-weight: bold;//文本加粗
				@include ellipsis-1;
			}
			.details {
				font-size: $uni-font-size-sm;//文本大小
				flex: 1; //尺寸增长权重：1
				@include ellipsis-1;
			}
			.time {
				font-size: $uni-font-size-sm;//文本大小
				transform-origin: left  center; //变形中心点： 左侧  中央
				transform: scale(0.9);//变形：缩放(0.9)
				color: $uni-color-subtitle;//文字颜色 #555
			}
		}
		.activity-img {
			width: 200rpx;
		}
	}
</style>